<template>
    <div v-loading="loading">
        <div>
            <div style="background: #fff; margin-bottom: 18px; padding: 12px 32px">
                <a-form layout="inline" :model="form">
                    <a-row>
                        <a-col :span="6">
                            <a-form-item label="数据来源">
                                <a-select style="width: 120px" v-model:value="platform" @change="handleChangePlatform">
                                    <a-select-option key="0"> PMP </a-select-option>
                                    <a-select-option key="1"> JIRA </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="7">
                            <a-form-item label="选择系统">
                                <flexbox>
                                    <h-search-select-cell
                                        :default-value="$filters.valToNameFilter('fromSystem', form.systemId)"
                                        type="platformSystem"
                                        :searchQuery="{ isOutsideSystem: platform }"
                                        label="systemName"
                                        @success="handleSelectChange"
                                        @optionsCreated="handleOptionsCreated"
                                        ref="searchSelectRef"
                                    />
                                    <ReloadOutlined class="margin-l-8" @click="handleRefresh" />
                                </flexbox>
                            </a-form-item>
                        </a-col>
                        <a-col :span="7">
                            <a-form-item label="选择时间">
                                <h-range-picker-cell
                                    :allowClear="false"
                                    :value="[
                                        form['startTime'] ? $moment(form['startTime'], 'YYYY-MM-DD') : null,
                                        form['endTime'] ? $moment(form['endTime'], 'YYYY-MM-DD') : null,
                                    ]"
                                    @change="rangeDateChange"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <a-empty v-if="isEmpty"></a-empty>
            <div v-else>
                <pmp-chart :detail="detail" :riskData="riskData" :form="form" v-if="platform === '0' && detail" />
                <jira-chart :detail="detail" :riskData="riskData" :form="form" v-if="platform === '1' && detail" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import defaultSettings from '@/config/defaultSettings';
import moment from 'moment';
import api from '@/api';
import store from '@/store';
import PmpChart from './pmpChart/index.vue';
import JiraChart from './jiraChart/index.vue';
import { ReloadOutlined } from '@ant-design/icons-vue';
import { HRangePickerCell, HSearchSelectCell } from '@/components';
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
export default defineComponent({
    name: 'insideChartsPmpChart',
    components: {
        HRangePickerCell,
        HSearchSelectCell,
        ReloadOutlined,
        PmpChart,
        JiraChart
    },
    setup() {
        const searchSelectRef = ref<any>();
        const state = reactive<any>({
            form: {
                systemId: '',
                startTime: moment().subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss'),
                endTime: moment().format('YYYY-MM-DD HH:mm:ss')
            },
            platform: '0',
            detail: null,
            loading: false,
            lineOption: {},
            totalTime: 0,
            riskData: {},
            isEmpty: false
        });
        const rangeDateChange = (val) => {
            const { startTime, endTime } = val;
            if (state.form.startTime !== startTime || state.form.endTime !== endTime) {
                state.form.startTime = startTime;
                state.form.endTime = endTime;
                getData();
            }
        };
        const handleRefresh = () => {
            unref(searchSelectRef).getOptions();
            const systemArr = store.getters.dicOptions.fromSystem.filter((item) => item.isOutsideSystem === state.platform);
            if (systemArr.length) {
                state.form.systemId = systemArr[0].id;
                getRiskData().then(() => {
                    getData();
                });
            }
        };
        const handleSelectChange = (e) => {
            state.form.systemId = e.id;
            getRiskData().then(() => {
                getData();
            });
        };
        const handleChangePlatform = () => {
            state.detail = null;
            initSystem();
            getRiskData().then(() => {
                getData();
            });
        };
        const getData = async () => {
            state.isEmpty = false;
            const requestApi =
                state.platform === '0'
                    ? api.efficiencyStatisticsModel.getPmpEfficiencyStatisticsInfo
                    : api.efficiencyStatisticsModel.getJiraEfficiencyStatisticsInfo;
            state.loading = true;
            const query = {
                ...state.form
            };
            const { success, moule } = await requestApi(query);
            if (success) {
                state.totalTime = moule.acceptAvgDays * 100 + moule.firstReviewAvgDays * 100 + moule.randdReviewAvgDays * 100;
                state.detail = {
                    ...moule,
                    acceptAvgDaysPercent: +(((moule.acceptAvgDays * 100) / state.totalTime) * 100).toFixed(1),
                    firstReviewAvgDaysPercent: +(((moule.firstReviewAvgDays * 100) / state.totalTime) * 100).toFixed(1),
                    randdReviewAvgDaysPercent: +(((moule.randdReviewAvgDays * 100) / state.totalTime) * 100).toFixed(1),
                    systemId: state.form.systemId
                };
            } else {
                state.isEmpty = true;
            }
            state.loading = false;
        };
        // 初始系统
        const initSystem = () => {
            const systemArr = store.getters.dicOptions.fromSystem.filter((item) => item.isOutsideSystem === state.platform);
            if (systemArr.length) {
                if (state.platform === '0') {
                    const { production } = defaultSettings;
                    state.form.systemId = production ? 75 : 26;
                } else {
                    state.form.systemId = systemArr[0].id;
                }
            }
        };
        const handleOptionsCreated = (options) => {
            console.log(options);
        };
        const getRiskData = async () => {
            const query = {
                id: state.form.systemId
            };
            const { success, moule } = await api.riskIndexModel.findBySystemId(query);
            if (success) {
                state.riskData = { ...moule };
            }
            return success;
        };
        initSystem();
        getRiskData().then(() => {
            getData();
        });
        return {
            searchSelectRef,
            ...toRefs(state),
            rangeDateChange,
            handleSelectChange,
            handleRefresh,
            handleChangePlatform,

            handleOptionsCreated
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-form-inline) {
    .ant-form-item {
        margin-bottom: 0 !important;
    }
}
</style>